<template>
    <div style="width:100%">
        <!--<actionsheet-->
            <!--v-model="show1"-->
            <!--:menus="menus1"-->
        <!--&gt;</actionsheet>-->
        <ul class="list">
            <li v-for="(item,index) in demoData" :key="index" >
                <div class="img">
                    <img :src="serviceIp+item.eqPicture" alt="">
                </div>
                <div class="content">
                    <h2 v-html="item.eqName" @click="alertShow(index)"></h2>
                    <p v-html="item.applyTo"></p>
                    <div class="contentBottom">
                        <x-button class="start" v-html="'开始预约'" @click.native="start(item)"></x-button>
                        <span class="price" v-html="`价格：${item.eq_official_price||item.groupPrice}元/例`"></span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    import {serviceIp} from "../../../config/api"
    export default {
        name:'product-list',
        props:{
            demoData:{
                default:[]
            }
        },
        data(){
            return{
                show1:false,
                showAlert:true,
                index:'',
                serviceIp:serviceIp,
                menus1: [{
                    label:'Actionsheet header',
                    type: 'info'
                }, {
                    label: 'Primary',
                    type: 'primary',
                    value: 'primary',
                    otherProp: 'hey'
                }, {
                    label: 'Warn',
                    type: 'warn'
                }, {
                    label: 'Disabled',
                    type: 'disabled'
                }, {
                    label: 'Default'
                }],
            }
        },
        methods:{
            start(data){
                console.log(data)
                // this.show1 = true
                // this.$router.push()
                this.$router.push({
                    name: 'appointment',
                    params: {
                        data: JSON.stringify(data)
                    }
                })
            },
            alertShow(index){
                // console.log(123)
                this.showAlert = true;
                this.index = index;
            }
        }
    }
</script>

<style lang="less" scoped>
    @import 'css/home.less';
    ul.list{
        width: 95%;
        margin: 0 auto;
        /*display: flex;*/
        flex-direction: column;

        overflow-y: scroll;
        li{
            height: auto;
            display: flex;
            width: 95%;
            padding: 10px;
            margin-top: 10px;
            /*align-items:center;*/
            border: 1px solid #efefef;
            .img{
                width: 35%;
                height: 150px;
                position: relative;
                overflow: hidden;
                img{
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: auto;
                    width: 100%;
                }
            }
            .content{
                flex:1;
                padding-left:25px;
                position: relative;
                h2{
                    font-size: 20px;
                }
                p{
                    font-size: 16px;
                    color: #666;
                    line-height: 25px;
                    margin-top: 8px;
                }
                .contentBottom{
                    width: 100%;
                    bottom: 0;
                    display: flex;
                    height: 40px;
                    flex-direction: row-reverse;
                    align-items: center;
                    justify-content: center;
                    .price{
                        flex:1;
                        font-size: 12px;
                        color: #333;
                    }
                    @media screen and (max-width:320px) {
                        .start{
                            width: 60px;
                            padding: 0;
                            background: rgb(208, 182, 255);
                            color: #fff;
                            font-size: 14px;
                        }
                    }
                    .start{
                        width: 60px;
                        padding: 0;
                        background: rgb(208, 182, 255);
                        color: #fff;
                        font-size: 12px;
                        height: 30px;
                    }
                }
            }
        }
    }
</style>
